import * as THREE from "three";
import { Water } from "three/examples/jsm/objects/Water";
export class CityWater {
  constructor(model, scene) {
    this.model = model;
    this.scene = scene;
    this.init();
  }
  // 初始化
  init() {
    // 保存原来水模型的几何模型
    const modelGeo = this.model.geometry;
    // 新的水模型
    this.model = new Water(modelGeo, {
      textureWidth: 512, // 水贴图的宽度
      textureHeight: 512, // 水贴图的高度
      // 纹理图片uv环绕到目标物体身上的重复方式
      waterNormals: new THREE.TextureLoader().load(
        "textures/waternormals.jpg", // 法线贴图，影响模型上每个像素点反射的光线
        function (texture) {
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // 尽可能的重复
        }
      ),
      sunDirection: new THREE.Vector3(), // 阳光方向
      sunColor: 0xffffff, // 阳光颜色
      waterColor: new THREE.Color("#1e90ff"), // 水颜色
      distortionScale: 4, // 水倒影分散程度（值越大与分散）
    });

    this.model.rotation.x = -Math.PI / 2; // 默认垂直x轴，让他绕着x轴旋转90°
    this.scene.add(this.model); // 模型物体添加到场景中
  }

  // 给水波做动画
  onTick(t) {
    // t：渲染循环启动过了多少毫秒时间
    // time全局参数是Water内置的，我们只要不断传入新的偏移量，就可以实现偏移效果
    this.model.material.uniforms["time"].value = t / 10000;
  }
}
